<template>
    <div class="wrapper">
        <Header name="我的积分" />

        <div id="credit" class="card">
            <img src="../assets/img/credit/积分.svg">
            我的积分
            <div style="font-size: 9vw;">{{ UsableCredit ? UsableCredit : 0 }}</div>
        </div>
        <div @click="toNotFound()" id="credit-info">
            赚取积分，抵扣现金 &gt;
        </div>

        <!--积分流水列表-->
        <div id="creditTransaction-title">
            积分明细
        </div>
        <hr style="margin:0;">
        <ul id="creditTransaction">
            <li id="creditTransactionItem" class="card" v-for="item in creditTransactionArr">
                <div class="left">
                    <p>开始时间：{{ item.startTime }}</p>
                    <p>结束时间：{{ item.endTime ? item.endTime : '无' }}</p>
                    <p>积分来源：{{ (item.type) == 1 ? '消费获取' : '消费抵扣' }}</p>
                </div>
                <div class="right">
                    {{ item.type == 1 ? '+' : '-' }}{{ item.amount }}
                </div>
            </li>
        </ul>
    </div>
</template>

<script>
import Header from '@/components/Header.vue'

export default {
    name: "Credit",
    data() {
        return {
            user: {},
            UsableCredit: '',
            creditTransactionArr: [],
        }
    },
    created() {
        this.user = this.$getSessionStorage('user');

        // 获取可用积分总额
        this.$axios.get(`CreditController/getUsableCredit/${this.user.userId}`).then(response => {
            this.UsableCredit = response.data.result;
            // console.log(this.creditTransactionArr)
        }).catch(error => {
            console.error(error);
        });

        // 获取积分流水列表
        this.$axios.get(`CreditController/getCreditTransaction/${this.user.userId}`).then(response => {
            this.creditTransactionArr = response.data.result;
            // console.log(this.creditTransactionArr)
        }).catch(error => {
            console.error(error);
        });
    },
    components: {
        Header,
    }
}
</script>

<style scoped>
.wrapper {
    width: 100vw;
    text-align: center;
}

.wrapper #credit {
    width: 50vw;
    height: 40vw;
    margin: 16vw auto 0;
    border: 0;
}

.wrapper #credit img {
    width: 11.5vw;
    margin: 5vw auto;
}

#credit-info {
    height: 5vw;
    font-size: 3.5vw;
    margin: 1.5vw auto;
    color: #ed9e58;
}

#creditTransaction-title {
    text-align: left;
    font-size: 4vw;
    font-weight: bold;
    padding-left: 3vw;
    margin: 2vw 0 1vw;
}

#creditTransaction {
    margin-top: 1.5vw;
}

#creditTransactionItem {
    /* justify-content: center; */
    width: 92vw;
    height: 18vw;
    margin: 1.6vw 4vw;
    display: inline-block;
}

.left {
    width: 60vw;
    font-size: 3.8vw;
    margin-left: 2vw;
    text-align: left;
    display: inline-block;
}

.right {
    width: 29vw;
    height: 21.5vw;
    text-align: right;
    display: inline-block;
    vertical-align: middle;
    font-size: 5.5vw;
}
</style>